<template>
    <footer>
        <ul>
            <RouterLink custom v-slot="{ isActive, navigate }" v-for="item in paths" :to="item.path" :key="item.path">
                <li @click="navigate(item.path)" :class="isActive ? 'active' : ''">
                    <span><van-icon :name="item.icon" /></span>
                    <span>{{ item.content }}</span>
                </li>
            </RouterLink>
        </ul>
    </footer>
</template>

<script>
import auth from '@/utils/auth';
export default {
    data() {
        return {
            paths: [
                { path: '/home', content: '首页', icon: 'wap-home-o' },
                { path: '/kind', content: '分类', icon: 'apps-o' },
                { path: '/cart', content: '购物车', icon: 'shopping-cart-o' },
                { path: '/my', content: '我的', icon: 'manager-o' }
            ]
        }
    },
    mounted(){
        this.pathsMap()
    },
    methods:{
       pathsMap(){
         this.paths=this.paths.map((item)=>{
            if(item.path=='/my'){
                return{...item,content:auth.isLoggedIn()?'我的':'未登录'}
            }
            return item
         })
       }
    }
}
</script>

<style lang="less" scoped>
.active {
    color: red;
}

footer ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;

    li {
        height: 100%;
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        span {
            font-size: 12px;
        }
    }
}
</style>